(function () {
  // rem适配，html跟字体的大小
  // 核心：设备宽 / 80
  let setFont = function () {
    // 获取html
    let html = document.documentElement // document.querySelector('html');
    // 获取宽度
    let width = html.clientWidth
    // 判断
    if (width <= 1600) width = 1600
    if (width >= 1920) width = 1920
    // 计算跟字体大小
    let fontSize = width / 80 + "px"
    // 设置给html
    html.style.fontSize = fontSize
  }
  setFont()
  // 设备窗口尺寸发生改变：resize
  window.addEventListener("resize", function () {
    setFont()
  })
})();

(function () {
  var arr = []
  var hu = []
  var lp = []

  $('button').on('click', function () {

    let v = $('.box').val()
    let b = $('.box1').val()
    let n = $('.box2').val()

    arr.push(Number(b))
    hu.push(v)
    lp.push(n)

    console.log(arr)

    var trr = $(`
        <tr>
        <th>${v}</th>
        <th>${b}</th>
        <th>${n}</th>
      </tr>
       `)

    $('.box').val('')
    $('.box1').val('')
    $('.box2').val('')

    $('.todo-list').append(trr)


    dian()
    zhu()
    // ---------点状图---------
    function dian () {

      let myChart = echarts.init($(".top")[0])

      let option = {
        xAxis: {
          type: 'category',
          data: hu,
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: arr,
          type: 'line',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0, color: 'red' // 0% 处的颜色
              }, {
                  offset: 1, color: 'blue' // 100% 处的颜色
              }],
              global: false // 缺省为 false
          }
          }
        }]
      }
      myChart.setOption(option)
    };

    function zhu () {
      let myChart = echarts.init($(".botton")[0])

      let option = {
        xAxis: {
          type: 'category',
          data: hu,
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: lp,
          type: 'bar',
          barWidth: 40,
        }]
      }
      myChart.setOption(option)
    }

  })
})()

